import React, { memo, useEffect, useState } from "react";
import { View } from "@tarojs/components";
import { formatDate } from "@/utils/fomatter";
import {
  Cell,
  CellGroup,
  Image,
  Icon

} from '@antmjs/vantui'

import './index.scss'

const HomeHotNews = (props) => {
  const { newList = [] } = props
  const [hotNews, setHotNews] = useState([])
  useEffect(() => {
    let result = []
    if (newList.length > 5) {
      result = newList.slice(0, 5)
    } else {
      result = newList
    }
    setHotNews(result)
  }, [newList])
  return (
    <View className='card-box'>
      <Cell
        border={false}
        renderTitle={<Image width='90px' height='40px' fit='cover' src={require('@/assets/images/hot-news.png')} />}
        value='更多'
        isLink
        linkType='navigateTo'
        url={'/homeDetail/hotNews/index?news=' + `${encodeURIComponent(JSON.stringify(newList))}`}
      />

      {
        hotNews.length ?
          <CellGroup border={false}>
            {
              hotNews.map((data, index) => {
                return (
                  <Cell
                    title={data?.newsTitle}
                    label={`${formatDate(data?.created, null, 'MM-DD')} | ${data.source}`}
                    titleStyle={{ fontWeight: 600, fontSize: '16px' }}
                    renderExtra={
                      data?.images ?
                        <Image width='74px' height='56px' src={data?.images} />
                        :
                        null

                    }
                    key={data?.newsId}
                    border={index == hotNews.length - 1 ? false : true}
                    linkType='navigateTo'
                    url={'/homeDetail/hotNewsDetail/index?newsId=' + `${data?.newsId}`}
                  />

                )
              })
            }
          </CellGroup>
          :
          null
      }

    </View>
  );
};

export default memo(HomeHotNews);
